<template>
  <div class="metabolismContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="metabolismMain">
      <el-card style="background: black;">
        <div class="content">
          <div class="top">
            <div class="title">
              <h1>代谢</h1>
              <h1>大卡计算器</h1>
              <el-icon style="font-weight: 900px;font-size: 80px;">
                <Iphone />
              </el-icon>
            </div>
            <el-form label-width="0" style="flex: 1;padding-right: 10px;margin-bottom: 20px;color: #e59637;">
              <el-form-item label="" prop="sex" style="margin-top: 20px;">
                <span>请选择 您的性别：</span>
                <el-radio-group v-model="sex">
                  <el-radio :label="'1'" style="margin-right: 20px;color: #e59637;">男</el-radio>
                  <el-radio :label="'0'" style="color: #e59637;">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="" prop="sex" style="margin-top: 0px;">
                <p style="color: #666666;font-size: 12px;" v-if="sex == '1'">基础代谢公式：大卡 = 66 + (13.7 x 体重) + (5 x 身高) - (6.8 x 年龄)</p>
                <p style="color: #666666;font-size: 12px;" v-else>基础代谢公式：大卡 = 665 + (9.6 x 体重) + (1.8 x 身高) - (4.7 x 年龄)</p>
              </el-form-item>
              <el-form-item label="" prop="sex" style="margin-top: 0px;">
                <p style="color: #666666;font-size: 12px;">计算全天总代谢 = 基础代谢 x 劳动系数</p>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 10px;">
                <span>请输入 您的年龄：</span>
                <el-input show-word-limit v-model="metabolismAge" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 40px;border-radius: 8px;" />
                <span style="margin-left: 8px;">身高(cm)：</span>
                <el-input show-word-limit v-model="metabolismHeight" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 40px;border-radius: 8px;" />
                <span style="margin-left: 8px;">体重(kg)：</span>
                <el-input show-word-limit v-model="metabolismWidth" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 40px;border-radius: 8px;" />
                <span style="margin-left: 8px;">劳动系数：</span>
                <el-select v-model="labour" placeholder="请选择" :no-data-text="'无数据'" style="width: 100px;height: 40px;">
                  <el-option label="低" :value="1.5" style="padding-left: 10px;padding-top: 8px;">
                  </el-option>
                  <el-option label="中" :value="1.75" style="padding-left: 10px;padding-top: 8px;">
                  </el-option>
                  <el-option label="高" :value="2.0" style="padding-left: 10px;padding-top: 8px;">
                  </el-option>
                </el-select>
                <el-button type="info" class="btn" style="" @click="onturn">
                  计算
                </el-button>
              </el-form-item>
              <el-form-item label="" prop="" style="margin-top: 10px;">
                <p style="color: #666666;font-size: 12px;">劳动系数的定义根据自己的工作性质，一天的运动活动量来：</p>
              </el-form-item>
              <el-form-item label="" prop="" style="margin-top: 5px;">
                <p style="color: #666666;font-size: 12px;">办公室工作等轻体力人群：1.5；&nbsp;</p>
                <p style="color: #666666;font-size: 12px;">业务员、家庭主妇、房产中介、餐饮服务人员等中体力：1.75；&nbsp;</p>
                <p style="color: #666666;font-size: 12px;">农民工、搬运工、外卖员等重体力：2.0</p>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 15px;">
                <span>您的全天总代谢约是：<span style="font-weight: 700;font-size: 22px;color: #FFFFFF;">{{ metabolismResult == '' ? '--' : metabolismResult }}</span></span>
                <span style="margin-left: 5px;">大卡</span>
                <el-button type="danger" class="btn" style="" @click="clean" v-if="metabolismAge || metabolismHeight || metabolismWidth || labour">
                  重置
                </el-button>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 15px;">
                <span style="font-size: 11px;opacity: 0.9;">* 即一天需要摄入的量</span>
              </el-form-item>
            </el-form>
          </div>
          <div class="down">
            <div class="middle">
              <el-form label-width="" style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 25px;">
                <el-form-item label="日常" prop="content" style="margin-bottom: 20px;">
                  <el-select v-model="metabolismGroup1" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                    <el-option
                      v-for="(item, index) in metabolismGroup1List"
                      :key="index"
                      :label="(item.name as string)"
                      :value="`${item.name}-${item.value}`"
                      style="padding-left: 10px;padding-top: 8px;"
                    >
                    </el-option>
                  </el-select>
                  <el-input v-model="metabolismGroup1Time" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 33px;border-radius: 8px;margin-bottom: 10px;margin-left: 5px;" />
                  <span style="margin-left: 5px;margin-bottom: 10px;color: #e59637;font-weight: 500;font-size: 16px;">分钟</span>
                  <el-button type="warning" icon="Plus" @click="changeSelected(metabolismGroup1, '1')" style="width: 20px;height: 20px;margin-left: 10px;margin-bottom: 10px;" circle></el-button>
                </el-form-item>
                <el-form-item label="体育" prop="content" style="margin-bottom: 20px;">
                  <el-select v-model="metabolismGroup2" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                    <el-option
                      v-for="(item, index) in metabolismGroup2List"
                      :key="index"
                      :label="(item.name as string)"
                      :value="`${item.name}-${item.value}`"
                      style="padding-left: 10px;padding-top: 8px;"
                    >
                    </el-option>
                  </el-select>
                  <el-input v-model="metabolismGroup2Time" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 33px;border-radius: 8px;margin-bottom: 10px;margin-left: 5px;" />
                  <span style="margin-left: 5px;margin-bottom: 10px;color: #e59637;font-weight: 500;font-size: 16px;">分钟</span>
                  <el-button type="warning" icon="Plus" @click="changeSelected(metabolismGroup2, '2')" style="width: 20px;height: 20px;margin-left: 10px;margin-bottom: 10px;" circle></el-button>
                </el-form-item>
                <el-form-item label="其他" prop="content" style="margin-bottom: 20px;">
                  <el-select v-model="metabolismGroup3" placeholder="请选择" :no-data-text="'无数据'" style="width: 150px;height: 40px;">
                    <el-option
                      v-for="(item, index) in metabolismGroup3List"
                      :key="index"
                      :label="(item.name as string)"
                      :value="`${item.name}-${item.value}`"
                      style="padding-left: 10px;padding-top: 8px;"
                    >
                    </el-option>
                  </el-select>
                  <el-input v-model="metabolismGroup3Time" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 33px;border-radius: 8px;margin-bottom: 10px;margin-left: 5px;" />
                  <span style="margin-left: 5px;margin-bottom: 10px;color: #e59637;font-weight: 500;font-size: 16px;">分钟</span>
                  <el-button type="warning" icon="Plus" @click="changeSelected(metabolismGroup3, '3')" style="width: 20px;height: 20px;margin-left: 10px;margin-bottom: 10px;" circle></el-button>
                </el-form-item>
                <span style="color: #666666;font-size: 12px;margin-top: 30px;">*数值有上下浮动仅供参考</span>
              </el-form>
            </div>
            <div class="bottom">
              <el-form label-width="50px" style="flex: 1;margin-bottom: 10px;">
                <el-form-item label="" prop="content" style="margin-top: 5px;">
                  <span style="font-weight: 700;font-size: 20px;color: #e59637;">今日消耗：</span>
                  <el-input show-word-limit v-model="metabolismText" placeholder="请输入内容后等待" type="textarea" style="margin-top: 15px;" disabled />
                </el-form-item>
                <el-form-item label="" prop="content" style="margin-top: 15px;">
                  <span style="font-size: 16p;color: #e59637;">由以上运动您将消耗的总热量为：<span style="font-weight: 700;font-size: 22px;color: #FFFFFF;">{{ metabolismValue == '' ? '--' : metabolismValue }}</span></span>
                  <span style="font-size: 16p;color: #e59637;margin-left: 5px;"> 大卡</span>
                </el-form-item>
                <el-form-item label="" prop="content" style="margin-top: 10px;">
                  <el-button type="danger" class="btn" @click="cleanText" v-if="metabolismValue">
                    重置
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="target">
            <el-form label-width="0" style="flex: 1;padding-right: 10px;margin-bottom: 20px;color: #e59637;">
              <el-form-item label="" prop="content" style="margin-bottom: 20px;">
                <span style="font-weight: 700;font-size: 20px;color: #e59637;">减重目标：</span>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 10px;">
                <span>请输入 您的目标：</span>
                <el-input show-word-limit v-model="day" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 40px;border-radius: 8px;" />
                <span style="margin-left: 8px;">天</span>
                <span style="margin: 0 8px;">减重</span>
                <el-input show-word-limit v-model="loseWeight" type="number" placeholder="请输入" maxlength="3" style="width: 80px;height: 40px;border-radius: 8px;" />
                <span style="margin-left: 8px;">斤</span>
                <el-button type="info" class="btn" style="" @click="compLoseWeight">
                  计算
                </el-button>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 15px;">
                <span>在吃够基础代谢后身体每天还需要产生如下的热量差：<span style="font-weight: 700;font-size: 22px;color: #FFFFFF;">{{ metabolismLoseWeightResult == '' ? '--' : metabolismLoseWeightResult }}</span></span>
                <span style="margin-left: 5px;">大卡</span>
                <el-button type="danger" class="btn" style="" @click="cleanLoseWeight" v-if="day || loseWeight">
                  重置
                </el-button>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 15px;">
                <span style="font-size: 11px; color: #666666;">* 消耗热量需要的运动量可从上面运动中进行估算</span>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 15px;" v-if="metabolismLoseWeightResult != ''">
                <span style="margin-left: 5px;">需要每天消耗 <span style="font-size: 22px;font-weight: 700;color: #FFFFFF;">{{ metabolismLoseWeightResult }}</span> 大卡，这样才能达到{{ day }}天瘦{{ loseWeight }}斤的目标</span>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 15px;">
                <span style="font-size: 11px; color: #666666;">* 1千克脂肪约等于7700卡</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'


const route = useRoute()
const router = useRouter()

const sex = ref<any>('1')
const metabolismAge = ref<any>('')
const metabolismWidth = ref<any>('')
const metabolismHeight = ref<any>('')
const labour = ref<any>()
const metabolismResult = ref<any>('')
const metabolismText = ref<any>('')
const metabolismValue = ref<any>('')

const metabolismGroup1 = ref<any>('')
const metabolismGroup2 = ref<any>('')
const metabolismGroup3 = ref<any>('')

const metabolismGroupTime = ref<any>('')
const metabolismGroup1Time = ref<any>('')
const metabolismGroup2Time = ref<any>('')
const metabolismGroup3Time = ref<any>('')

const day = ref<any>('')
const loseWeight = ref<any>('')
const metabolismLoseWeightResult = ref<any>('')


// value数值为100kg 1分钟的消耗量
const metabolismGroup1List = ref<any[]>([
  { name: '散步', value: '6'},
  { name: '快走(8km/h)', value: '16'},
  { name: '上楼梯', value: '8'},
  { name: '下楼梯', value: '5'},
  { name: '扫地', value: '4'},
  { name: '拖地', value: '6'},
  { name: '洗衣服', value: '3'},
  { name: '洗碗', value: '3'},
])
const metabolismGroup2List = ref<any[]>([
  { name: '跑步(8km/h)', value: '16'},
  { name: '跑步(9.7km/h)', value: '21'},
  { name: '跑步(10.8km/h)', value: '23'},
  { name: '跑步(12.9km/h)', value: '28'},
  { name: '跑步(14.5km/h)', value: '32'},
  { name: '跑步(16km/h)', value: '34'},
  { name: '足球', value: '16'},
  { name: '篮球', value: '12'},
  { name: '排球', value: '7'},
  { name: '羽毛球', value: '14'},
  { name: '乒乓球', value: '7'},
  { name: '跳绳', value: '21'},
  { name: '游泳(蛙泳)', value: '21'},
  { name: '游泳(侧泳)', value: '16'},
  { name: '游泳(仰泳)', value: '14'},
])
const metabolismGroup3List = ref<any[]>([
  { name: '健美操', value: '7'},
  { name: '跳舞', value: '10'},
  { name: '骑马', value: '7'},
  { name: '仰卧起坐', value: '16'},
  { name: '划船', value: '6'},
  { name: '爬山', value: '14'},
  { name: '滑雪', value: '14'},
  { name: '溜冰', value: '3'},
  { name: '脚踏车(16~19/h)', value: '12'},
  { name: '脚踏车(19~22/h)', value: '16'},
  { name: '脚踏车(25~30/h)', value: '25'},
])

const changeSelected = (val: any, type: any) => {
  if (metabolismResult.value == '') {
    metabolismGroup1.value = ''
    metabolismGroup2.value = ''
    metabolismGroup3.value = ''
    metabolismGroupTime.value = ''
    metabolismGroup1Time.value = ''
    metabolismGroup2Time.value = ''
    metabolismGroup3Time.value = ''
    ElMessage({
      type: 'warning',
      message: '请先填写上面的信息计算您全天的总代谢！'
    })
    return
  }
  if (val == '') {
    ElMessage({
      type: 'warning',
      message: '请选择项目！'
    })
    return
  }
  const name = val.split('-')[0]
  const value =  val.split('-')[1]
  if (type == '1') {
    if (metabolismGroup1Time.value == '' || Number(metabolismGroup1Time.value) <= 0) {
      ElMessage({
        type: 'warning',
        message: '请填写正确的时间！'
      })
      return
    }
    metabolismGroupTime.value = metabolismGroup1Time.value
  } else if (type == '2') {
    if (metabolismGroup2Time.value == '' || Number(metabolismGroup2Time.value) <= 0) {
      ElMessage({
        type: 'warning',
        message: '请填写正确的时间！'
      })
      return
    }
    metabolismGroupTime.value = metabolismGroup2Time.value
  } else {
    if (metabolismGroup3Time.value == '' || Number(metabolismGroup3Time.value) <= 0) {
      ElMessage({
        type: 'warning',
        message: '请填写正确的时间！'
      })
      return
    }
    metabolismGroupTime.value = metabolismGroup3Time.value
  }
  metabolismText.value = metabolismText.value + name + metabolismGroupTime.value + '分钟' + '、'
  metabolismValue.value = (Number(metabolismValue.value) + (Number(value) / 100 * Number(metabolismWidth.value) * Number(metabolismGroupTime.value))).toFixed(1)
  if (type == '1') {
    metabolismGroup1.value = ''
    metabolismGroup1Time.value = ''
  } else if (type == '2') {
    metabolismGroup2.value = ''
    metabolismGroup2Time.value = ''
  } else {
    metabolismGroup3.value = ''
    metabolismGroup3Time.value = ''
  }
}

const onturn = () => {
  if (metabolismAge.value == '' || metabolismWidth.value == '' || metabolismHeight.value == '' || labour.value == '') {
    ElMessage({
      type: 'warning',
      message: '必填信息不能为空！'
    })
  } else {
    // 男性：(66 + (13.7*体重) + (5*身高) - (6.8*年龄))* 劳动系数
    if (metabolismAge.value == '1') {
      const result: any = ((
        66 + (13.7 * Number(metabolismWidth.value)) + (5 * Number(metabolismHeight.value)) - (6.8 * Number(metabolismAge.value))
      ) * Number(labour.value)).toFixed(1) // toFixed 四舍五入且保留一位小数
      metabolismResult.value = result
    } else {
    // 女性：(665 + (9.6*体重) + (1.8*身高) - (4.7*年龄))* 劳动系数
      const result: any = ((
        665 + (9.6 * Number(metabolismWidth.value)) + (1.8 * Number(metabolismHeight.value)) - (4.7 * Number(metabolismAge.value))
      ) * Number(labour.value)).toFixed(1) // toFixed 四舍五入且保留一位小数
      metabolismResult.value = result
    }
  }
}

const clean = () => {
  metabolismAge.value = ''
  metabolismWidth.value = ''
  metabolismHeight.value = ''
  labour.value = ''
  metabolismResult.value = ''
}

const cleanText = () => {
  metabolismGroup1.value = ''
  metabolismGroup2.value = ''
  metabolismGroup3.value = ''
  metabolismGroupTime.value = ''
  metabolismGroup1Time.value = ''
  metabolismGroup2Time.value = ''
  metabolismGroup3Time.value = ''
  metabolismText.value = ''
  metabolismValue.value = ''
}

const compLoseWeight = () => {
  if (day.value == '' || loseWeight.value == '') {
    ElMessage({
      type: 'warning',
      message: '必填信息不能为空！'
    })
    return
  }
  metabolismLoseWeightResult.value = (Number(loseWeight.value) / 2 * 7700 / Number(day.value)).toFixed(1)
}

const cleanLoseWeight = () => {
  day.value = ''
  loseWeight.value = ''
  metabolismLoseWeightResult.value = ''
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.metabolismContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .metabolismMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .top {
          flex: 1;
          margin-bottom: 20px;
          display: flex;
          flex-direction: row;

          :deep(.el-input__wrapper) {
            width: 200px;
            height: 40px;
            border: 1px solid #e59637;
            border-radius: 12px;
          }
          
          .title {
            width: 200px;
            color: #e59637;
            font-weight: 900;
            font-size: 23px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            h1 {
              margin-bottom: 10px;
            }
          }
          .btn {
            width: 78px;
            height: 38px;
            background-color: #e59637;
            border: 1px solid #e59637;
            border-radius: 8px;
            margin-left: 15px;
            color: black;
            font-size: 14px;
          }
          .btn :hover {
            font-size: 16px;
          }
        }
        .down {
          flex: 1;
          display: flex;
          flex-direction: row;
          .middle {
            flex: 1;
            border: 1px solid #e59637;
            border-radius: $base-card-border-radius;
            margin-right: 15px;
            justify-content: center;
            align-items: center;
            padding: 50px 0;
            height: auto;
            :deep(.el-input__wrapper) {
              border: none;
              background-color: #FFFFFF;
              border-radius: $base-card-border-radius;
            }
            :deep(.el-form-item__label) {
              color: #e59637;
              font-weight: 500;
              font-size: 16px;
            }
          }
          .bottom {
            flex: 1;
            border: 1px solid #e59637;
            border-radius: $base-card-border-radius;
            padding: 20px 0;
            :deep(.el-input__wrapper) {
              border: none;
              background-color: #FFFFFF;
              border-radius: $base-card-border-radius;
            }
            :deep(.el-textarea__inner) {
              width: 85%;
              height: 160px;
              border-radius: $base-card-border-radius;
            }
            .btn {
              width: 78px;
              height: 38px;
              background-color: #e59637;
              border: 1px solid #e59637;
              border-radius: 8px;
              color: black;
              font-size: 14px;
            }
            .btn :hover {
              font-size: 16px;
            }
            .out {
              padding: 1px 14px;
              font-weight: 500;
              font-size: 14px;
              margin-left: 30px;
              color: #F56C6C;
              border: 1px solid #F56C6C;
              border-radius: 8px;
            }
          }
        }
        .target {
          flex: 1;
          margin-top: 15px;
          padding: 30px;
          border: 1px solid #e59637;
          border-radius: $base-card-border-radius;
          :deep(.el-input__wrapper) {
            width: 200px;
            height: 40px;
            border: 1px solid #e59637;
            border-radius: 12px;
          }
          .btn {
            width: 78px;
            height: 38px;
            background-color: #e59637;
            border: 1px solid #e59637;
            border-radius: 8px;
            margin-left: 15px;
            color: black;
            font-size: 14px;
          }
          .btn :hover {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>